<template>
	<view>
		<simple-toolbar :title="$t('login.loginAccount')" style="color: #12A234;"></simple-toolbar>
		<el-row type="flex" justify="center">
			<el-col :xs="24" :sm="16" :md="14" :lg="12" :xl="10">
				<view style="padding: 9.37rpx;">
					<view class="title align-center">{{ $t('login.title') }}</view>
					<view class="sub-title align-center">{{ $t('login.subTitle') }}</view>
					<el-form class="form" :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top">
						<fieldset style="margin-bottom: 11.71rpx;">
							<legend>{{ $t('login.email') }}</legend>
							<el-form-item prop="username">
								<el-input v-model="ruleForm.username" :placeholder="$t('login.email_pla')">
									<image slot="prefix" src="../../static/ic_email@2x.png" mode="aspectFit" class="input-icon"></image>
								</el-input>
							</el-form-item>
						</fieldset>
						<fieldset>
							<legend>{{ $t('login.password') }}</legend>
							<el-form-item prop="password">
								<el-input v-model="ruleForm.password" type="password" :placeholder="$t('login.password_pla')" @keyup.enter.native="submitForm()">
									<image slot="prefix" src="../../static/ic_pwd@2x.png" mode="aspectFit" class="input-icon"></image>
								</el-input>
							</el-form-item>
						</fieldset>
						<text class="forget" @click="resetDialog = true">{{ $t('login.forgotPassword') }}</text>
						<el-button style="width: 100%; margin: 18.75rpx 0; box-shadow: 0px 3px 6px rgba(18, 162, 52, 0.16);" type="primary" @click="submitForm()">{{ $t('login.login') }}</el-button>
						<text class="no-account">{{ $t('login.notAccount') }}<text style="color: #12A234; cursor: pointer;" @click="navToRegister">{{ $t('login.registered') }}</text></text>
					</el-form>
				</view>
			</el-col>
		</el-row>
		<auth ref="auth" :user_id="loginRes.user_id || 0" :email="ruleForm.username"></auth>
		
		<!-- 重置密码-发送邮箱 -->
		<el-dialog :visible.sync="resetDialog" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false" :destroy-on-close="true" class="authCode">
			<view slot="title">
				<view>{{ $t('login.enterEmailTiT') }}</view>
			</view>
			<view class="h-fill">
				<el-input class="input-class" v-model="resetEmail"  :placeholder="$t('login.enterEmail')" @keyup.enter.native="resetPage"></el-input>
			</view>
			<view class="h-box justify-end">
				<el-button @click="resetDialog = false" class="h-fill">{{ $t('login.cancel') }}</el-button>
				<el-button @click="resetPage" type="primary" class="h-fill" :disabled='disable'>{{ $t('login.send') }}</el-button>
			</view>
		</el-dialog>
		
		<!-- 重置密码-tips -->
		<el-dialog :visible.sync="tips" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false" :destroy-on-close="true" class="authCode">
			<view slot="title">
				<view>{{ $t('login.tips') }}</view>
			</view>
			<view class="h-box justify-end footer">
				<el-button @click="tips = false" class="h-fill">{{ $t('login.return') }}</el-button>
				<el-button @click="tips = false" type="primary" class="h-fill">{{ $t('login.auth') }}</el-button>
			</view>
		</el-dialog>
	</view>
</template>

<script>
	import {
		login,
		resetPage,
	} from "../../js_sdk/uni-admin/user.js"
	export default {
		data() {
			let validateEmail = (rule, value, callback) => {
				if (value === '') {
					callback(new Error(this.$t('login.email_pla')));
				} else {
					callback();
				}
			}
			let validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error(this.$t('login.password_pla')));
				} else {
					callback();
				}
			}
			return {
				disable: false,
				tips: false,
				resetEmail: '',
				resetDialog: false,
				
				ruleForm: {
					username: uni.getStorageSync("email") || '',
					password: ''
				},
				rules: {
					username: [{
						required: true,
						// message: this.$t('login.email_pla'),
						validator: validateEmail,
						trigger: 'blur'
					}],
					password: [{
						required: true,
						// message: this.$t('login.password_pla'),
						validator: validatePass,
						trigger: 'blur'
					}]
				},
				loginRes: {
					user_id: 0
				}
			}
		},
		mounted() {
			document.addEventListener('keydown', this.keyDown)
		},
		beforeDestroy() {
			document.removeEventListener('keydown', this.keyDown, false)
		},
		methods: {
			keyDown(e) {
				if (e.keyCode == 13) {
					this.submitForm()
				}
			},
			async resetPage() {
				if (!this.resetEmail.trim()) {
					this.$message.error(this.$t('login.enterEmail'))
					return
				}
				this.disable = true
				let obj = {
					email: this.resetEmail
				}
				try{
					let res = await resetPage(obj)
					this.resetDialog = false
					this.disable = false
					this.resetEmail = ''
					this.tips =true
				}catch(e){
					this.disable = false
				}
			},
			submitForm() {
				this.$refs.ruleForm.validate(async (valid) => {
					if (valid) {
						try {
							let res = await login({
								username: this.ruleForm.username,
								password: this.ruleForm.password
							})
							this.loginRes = res.data
							document.removeEventListener('keydown', this.keyDown, false)
							this.$refs.auth.startAuth()
						} catch (e) {
							//TODO handle the exception
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			navToRegister() {
				uni.navigateTo({
					url: "./register"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.authCode /deep/ {
		.el-dialog {
			width: 156.25rpx;
			margin: 0!important;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 1.56rpx;
			.el-dialog__header {
				padding-bottom: 0;
				font-size: 6.25rpx;
				font-weight: 500;
			}
			.el-dialog__body {
				padding-top: 0;
			}
			.el-input {
				margin: 9.37rpx 0 14.06rpx;
				border: 0.39rpx solid #EAEAEA;
				border-radius: 1.56rpx;
			}
			.el-button {
				width: 34.37rpx;
				height: 12.5rpx;
				padding: 0;
			}
			.footer {
				margin-top: 9.37rpx;
			}
		}
	}
	
	.form /deep/ {
		.el-form-item {
			margin: 0;
			padding: 0;

			// height: 11.71rpx;
			// line-height: 11.71rpx;
			.el-input__inner,
			.el-input,
			.el-form-item__content {
				height: 11.71rpx;
				line-height: 11.71rpx;
			}

			.el-form-item__error {
				top: 140%;
			}
		}
	}

	.title {
		font-size: 12.5rpx;
		font-family: Source Han Sans SC;
		font-weight: 800;
		line-height: 18.35rpx;
		color: #3B3E66;
		margin-top: 18.75rpx;
	}

	.sub-title {
		font-size: 7.03rpx;
		font-weight: 400;
		line-height: 10.54rpx;
		color: #9D9EB2;
		margin-bottom: 23.43rpx;
	}

	/deep/ .forget .el-button--text {
		color: #3B3E66;
	}

	/deep/ .el-input__prefix {
		display: flex;
		align-items: center;
	}

	.input-icon {
		width: 8.59rpx;
		height: 8.59rpx;
		vertical-align: bottom;
	}

	.forget {
		line-height: 9.37rpx;
		color: #3B3E66;
		margin-top: 7.81rpx;
		cursor: pointer;
		display: inline-block;
	}

	.no-account {
		font-size: 6.25rpx;
		line-height: 9.37rpx;
	}

	/deep/ .el-input__inner {
		border: 0 !important;
	}

	/deep/ .input:-internal-autofill-selected {
		background-color: #fff;
	}

	fieldset {
		font-size: 5.46rpx;
		background: #FFFFFF;
		border: 0.39rpx solid #C4C4C4;
		border-radius: 1.56rpx;
		
		legend {
			line-height: 7.81rpx;
			color: #A2A2A2;
		}
	}

	input:-internal-autofill-selected {
		background-color: transparent !important;
	}
</style>
